<template>
  <div class="full-height">
		<van-nav-bar  title="接单时间设定" />
		<van-dropdown-menu class="drop">
      <van-dropdown-item v-model="value0" :options="option1" @change="change1"></van-dropdown-item>
    </van-dropdown-menu>
		<div class="pb-130 ofs">
			<div v-if="value0 == 1" class="bg-white">     
				<div class="flex-v-c  pd-24">
					<span class="flex-1 popup-input ptb-16" :class="requestData.RestStartTime?'':'color-gray-light'" @click="openStartDateSelect"> {{ requestData.RestStartTime||'请选择开始时间' }}</span>
					<span class="fs-28 ptb-16 mlr-18">至</span>
					<span class="flex-1 popup-input ptb-16 " :class="requestData.RestEndTime?'':'color-gray-light'" @click="openEndDateSelect"> {{ requestData.RestEndTime||'请选择结束时间' }}</span>
				</div>
			</div>
			<div v-else class="bg-white plr-48 ptb-24" >
				<van-checkbox-group v-model="restValue">
					<div class="flex flex-s-c mb-24"> <span>星期一</span> <van-checkbox checked-color="#24c373" shape="square" name="1"></van-checkbox></div>
					<div class="flex flex-s-c mb-24"> <span>星期二</span> <van-checkbox checked-color="#24c373" shape="square" name="2"></van-checkbox></div>
					<div class="flex flex-s-c mb-24"> <span>星期三</span> <van-checkbox checked-color="#24c373" shape="square" name="3"></van-checkbox></div>
					<div class="flex flex-s-c mb-24"> <span>星期四</span> <van-checkbox checked-color="#24c373" shape="square" name="4"></van-checkbox></div>
					<div class="flex flex-s-c mb-24"> <span>星期五</span> <van-checkbox checked-color="#24c373" shape="square" name="5"></van-checkbox></div>
					<div class="flex flex-s-c mb-24"> <span>星期六</span> <van-checkbox checked-color="#24c373" shape="square" name="6"></van-checkbox></div>
					<div class="flex flex-s-c mb-24"> <span>星期日</span> <van-checkbox checked-color="#24c373" shape="square" name="0"></van-checkbox></div>
				</van-checkbox-group>
			</div>
			<div class="bg-white">
				<p class="gray-line" />
				<p class="fs-28 pl-24 mt-40 fw-b">每日接单时间点设定</p>				
				<div class="flex-v-c mb-28 pd-24">
					<span class="flex-1 popup-input ptb-16" :class="requestData.WorkTimeStart?'':'color-gray-light'" @click="openStartTimeSelect"> {{ requestData.WorkTimeStart||'请选择开始时间' }}</span>
					<span class="fs-28 ptb-16 mlr-18">至</span>
					<span class="flex-1 popup-input ptb-16 " :class="requestData.WorkTimeEnd?'':'color-gray-light'" @click="openEndTimeSelect"> {{ requestData.WorkTimeEnd||'请选择结束时间' }}</span>
				</div>
			</div>
			<div class="tac">							
				<button class="placeorder" @click.stop="submit">保存</button>
			</div>
		</div>
	
		<div class="flex flex-sa-c fixed-bottom bg-white ptb-16 plr-40 mb-120">
			<button :class="isOffline === 0?'':'active'" :disabled="isOffline === 0" class="btn"  @click="changeOnLine(0)">上线</button>
			<button :class="isOffline === 1?'':'active'" :disabled="isOffline === 1" class="btn" @click="changeOnLine(1)">下线</button>
		</div>
		
		<!-- 日期选择 -->
		<van-popup v-model="startDateSelect" position="bottom">
      <van-datetime-picker
        v-model="startCurrentDate"
        item-height="45"
        visible-item-count="4"
        title="请选择开始日期"
				type="date"
				@cancel="onCancel"
        @confirm="onStartConfirm"
      />
    </van-popup>
    <van-popup v-model="endDateSelect" position="bottom">
      <van-datetime-picker
        v-model="endCurrentDate"
        item-height="45"
        visible-item-count="4"
        title="请选择结束日期"
				type="date"
				@cancel="onCancel"
        @confirm="onEndConfirm"
      />
    </van-popup>

		<!-- 时间选择 -->
    <van-popup v-model="startTimeSelect" position="bottom">
      <van-datetime-picker
        v-model="startCurrentTime"
        item-height="45"
        visible-item-count="4"
        title="请选择开始时间"
				type="time"
        min-hour="00"
  			max-hour="23"
  			min-minute="00"
  			max-minute="59"
				@cancel="onCancel"
        @confirm="onStartConfirmTime"
      />
    </van-popup>
    <van-popup v-model="endTimeSelect" position="bottom">
      <van-datetime-picker
        v-model="endCurrentTime"
        item-height="45"
        visible-item-count="4"
        title="请选择结束时间"
				type="time"
        min-hour="00"
				max-hour="23"
				min-minute="00"
				max-minute="59"
				@cancel="onCancel"
        @confirm="onEndConfirmTime"
      />
    </van-popup>		
		<tabBar />
	</div>
</template>
<script>
import tabBar from './tabBar.vue'
import { GetArtificerWorkTimeInfo,SubmitArtificerWorkTime,GetArtificerInfo,SubmitArtificerLineState } from 'api/physio'
export default {
	components:{
		tabBar
	},
	data(){
		return{
			value0: 1,
			option1:[
        { text: '按周休息', value: 0 }, 
				{ text: '指定时间休息', value: 1 }, 
			],
			// 时间相关
			minDate: new Date(2020, 1, 1),
      maxDate: new Date(2120, 11, 1),
			resetMinDate:new Date(2020, 1, 1),
      startTimeSelect: false,
      startCurrentTime: '00:00',
      endTimeSelect: false,
      endCurrentTime: '00:00',
      oldRequestData: {},
			startCurrentDate: new Date(),
      endCurrentDate: new Date(),
			startDateSelect: false,
      endDateSelect: false,
			restValue: [],
			// 请求参数
      requestData: {

			},
			isShowDate: false,
			isOffline: 0, //在线状态(0不在线 1在线)
		}
	},
	created(){
		this.GetArtificerWorkTimeInfo()
		this.GetArtificerInfo()
	},
	methods:{
		GetArtificerInfo(){
			GetArtificerInfo().then(res => {
				if(res){
					this.isOffline = res.Data.IsOffline
				}
			})
		},
		GetArtificerWorkTimeInfo(){
			GetArtificerWorkTimeInfo().then(res => {
				if(res.Data){					
					this.requestData = res.Data
				}
				if(this.requestData.RestStartTime){
					this.startCurrentDate = this.requestData.RestStartTime
				}
				if(this.requestData.RestEndTime){
					this.endCurrentDate = this.requestData.RestEndTime
				}
				console.log(this.requestData,res.Data,"FDFDS")
			})
		},
		change1(ID){
			console.log(ID,"选择")
		},
		openStartTimeSelect() {
      if (this.requestData.WorkTimeStart) {
        this.startCurrentTime = this.requestData.WorkTimeStart
      } else {
        this.startCurrentTime = '00:00'
      }
      this.startTimeSelect = true
    },
    openEndTimeSelect() {
      if (this.requestData.WorkTimeEnd) {
        this.endCurrentTime = this.requestData.WorkTimeEnd
      } else {
        this.endCurrentTime = '23:59'
      }
      this.endTimeSelect = true
    },
    onStartConfirmTime(val) {
      this.requestData.WorkTimeStart = val
      this.startTimeSelect = false
      this.$forceUpdate()
    },
		onCancel(){
			this.startTimeSelect = false
			this.endTimeSelect = false
			this.startDateSelect = false
			this.endDateSelect = false
			this.$forceUpdate()
		},
    onEndConfirmTime(val) {
      this.requestData.WorkTimeEnd =  val
      this.endTimeSelect = false
      this.$forceUpdate()
    },
		openStartDateSelect() {
      if (this.requestData.RestStartTime) {
        this.startCurrentDate = new Date(this.requestData.RestStartTime)
      } else {
        this.startCurrentDate = new Date()
      }
      this.startDateSelect = true
    },
    openEndDateSelect() {
      if (this.requestData.RestEndTime) {
        this.endCurrentDate = new Date(this.requestData.RestEndTime)
      } else {
        this.endCurrentDate = new Date()
      }
      this.endDateSelect = true
    },
		onStartConfirm(val) {
      console.log(val,this.endCurrentDate,this.requestData.RestEndTime)
      if (this.requestData.RestEndTime && this.endCurrentDate < val) {
        this.$toast('开始时间不能晚于结束时间')
        return false
      }
      this.requestData.RestStartTime = this.$utils.dateFomat('yyyy-mm-dd', val)
      this.startDateSelect = false
      this.$forceUpdate()
    },
    onEndConfirm(val) {
			console.log(val,this.startCurrentDate,this.requestData.RestStartTime)
      if (this.requestData.RestStartTime && this.startCurrentDate > val) {
        this.$toast('结束时间不能早于开始时间')
        return false
      }
      this.requestData.RestEndTime = this.$utils.dateFomat('yyyy-mm-dd', val)
      this.endDateSelect = false
      this.$forceUpdate()
    },
    
		submit(){
			this.requestData.restType = this.value0
			this.requestData.restValue = this.restValue.toString()			
			SubmitArtificerWorkTime(this.requestData).then(res => {
				if(res){
					this.$toast("设定时间成功")
				}
			})
		},
		
		changeOnLine(type){
			var message = '您已开启上线接单！'
			if(type === 1){
				message = '您已下线休息！'
			}
			SubmitArtificerLineState({state:type}).then(res =>{
				console.log(res,'状态')
				if(res){
					this.GetArtificerInfo()
					setTimeout(()=>{
						this.$toast({
							message:message,
						})
					},200)
				}
			})
		}
	}
}
</script>
<style lang="scss" scoped>
	.margin{
		width: 686px;
		height: 80px;
		background: #FFFFFF;
		border-radius: 40px;
		border: 1px solid #24c373;
	}
	.gray-line{
		height: 12px;
		background: #F6F6F6;
	}
	.popup-input{
		text-align: center;
		font-size: 28px;				
		background: #F2F3FC;
		border-radius: 16px;
	}
	.placeorder{
		width: 670px;
		height: 88px;
		line-height: 88px;
		border-radius: 44px;
		text-align: center;
		font-size: 32px;
		border: 1px solid #24c373;
		color: #24c373;
	}
	.mb-38{
		padding-bottom: 38px;
		font-size: 32px;
	}
	.drop .van-dropdown-item__content{
		box-shadow: none !important;
		width: 80%;
	}
	/deep/.van-dropdown-menu__bar{
		box-shadow:none;
	}
	.active{
		background: #24c373 !important;		
		border: 1px solid #24c373;
		
	}
	.btn{
		width: 310px;
		height: 72px;
		line-height: 72px;
		border-radius: 36px;
		text-align: center;
		border: 1px solid #F2F3FC;
		background: rgba(36, 195, 115, .55);
		color: #fff;
	}
</style>
